<style type="text/css">
    .audio-video-manager-item {
        border: 1px solid lightgrey;
        margin: 5px;
        padding: 0 5px 0 5px;
    }

    .audio-video-manager-item .image {
        float: left;
        margin: 5px 5px 5px 0;
        width: 50px;
        height: 50px;
        text-align: center;
    }

    .audio-video-manager-item .clear {
        clear: both;
    }

    .audio-video-manager-item p {
        float: left;
    }

    .audio-video-manager-editor {
        border: 1px solid black;
        margin: 5px;
        padding: 0 5px 0 5px;
        display: none;
    }

    .audio-video-manager-select {
        display: none;
    }
</style>

<?php foreach ($AVs as $AV) : ?>
    <div class="audio-video-manager-item"
         id="audio-video-manager-item-<?php echo $AV['ID']; ?>">
        <?php if ($AV['type'] != 'audio') : ?>
            <div class="image">
                <img src="<?php echo $AV['poster'] ?>"
                     style="
                     width: <?php echo $AV['width'] ?>px;
                     height: <?php echo $AV['height'] ?>px;
                     "/>
            </div>
        <?php else : ?>
            <div class="image"></div>
        <?php endif; ?>
        <p style="float: right;">
            <input type="submit"
                   value="Edit"
                   class="audio-video-manager-non-select"
                   onclick="javascript:html5avCallEditor(<?php echo $AV['ID']; ?>)"
                   />
            <input type="submit"
                   value="Delete"
                   class="audio-video-manager-non-select"
                   onclick="javascript:html5avManagerDelete(<?php echo $AV['ID']; ?>)"
                   />
            <input type="submit"
                   value="Select"
                   class="audio-video-manager-select"
                   onclick="javascript:html5avManagerSelect(<?php echo $AV['ID']; ?>)"
                   />
        </p>
        <p>
            ID: <strong
                id="audio-video-manager-id-<?php echo $AV['ID']; ?>"
                ><?php echo $AV['ID'] ?></strong>
            Type: <strong
                id="audio-video-manager-type-<?php echo $AV['ID']; ?>"
                ><?php echo $AV['type'] ?></strong>
            Shortcode: <strong
                id="audio-video-manager-shortcode-<?php echo $AV['ID']; ?>"
                >[html5av id="<?php echo $AV['ID'] ?>"]</strong><br />
            Title: <strong
                id="audio-video-manager-title-<?php echo $AV['ID']; ?>"
                ><?php echo $AV['title'] ?></strong>
            Posted by: <strong
                id="audio-video-manager-author-<?php echo $AV['ID']; ?>"
                ><?php echo $AV['author'] ?></strong>
            Created on: <strong
                id="audio-video-manager-created-<?php echo $AV['ID']; ?>"
                ><?php echo $AV['created'] ?></strong>
            Modified: <strong
                id="audio-video-manager-modified-<?php echo $AV['ID']; ?>"
                ><?php echo $AV['modified'] ?></strong>
        </p>
        <div class="clear" ></div>
        <div class="audio-video-manager-editor"
             id="audio-video-manager-editor-<?php echo $AV['ID']; ?>"
             ></div>
    </div>
<?php endforeach; ?>

<script type="text/javascript">
    var html5av_api = '<?php echo html5av_manager::getApiURL() ?>';
    
    function html5avCallEditor(id) {
        jQuery('.audio-video-manager-editor').css('display','none');
        jQuery('.audio-video-manager-editor').html('');
        var post = {
            action: 'html5av_manager',
            node:'get_media_editor',
            avid:id
        }
        jQuery.post(ajaxurl, post, function(data) {
            jQuery('#audio-video-manager-editor-'+id).html(data);
            jQuery('#audio-video-manager-editor-'+id).css('display','block');
        });
        return false;
    }
    
    function html5avManagerDelete(id) {
        if(confirm("Are you sure?")) {
            var post = {
                action: 'html5av_manager',
                node:'video_audio_manager_delete',
                avid:id
            };
            jQuery.post(ajaxurl, post, function() {
                html5avSetCurPage();
            });
        }
        return false;
    }
    
    function html5avManagerSelect(id) {
        if(jQuery('#html5av-widget').size() > 0) {
            jQuery('#html5avmanagerid').val(id);
            html5avWidgetCheck();
            jQuery('#html5av-widget-selector-dialog').dialog('close');
            jQuery('#html5av-widget-selector-dialog').html('');
        }
    }
</script>